<template>
  <el-select
    clearable
    filterable
    v-bind="$attrs"
    placeholder="请选择发货方"
    @input="handleInput"
  >
    <el-option
      v-for="item in shipper"
      :key="item.name"
      :label="item.name"
      :value="item.name"
    >
    </el-option>
  </el-select>
</template>

<script>
import { mapState, mapActions } from "vuex";
export default {
  name: "ShipperSelect",
  inheritAttrs: true,
  computed: {
    ...mapState({
      shipper: (state) => state.basic.shipper
    })
  },
  created() {
    console.log("loadShipper", this.shipper);
    if (this.shipper.length < 1) this.loadShipper();
  },
  methods: {
    ...mapActions({
      loadShipper: "basic/loadShipper"
    }),
    handleInput(value) {
      this.$emit("input", value);
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped></style>
